<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-row style="margin-bottom:12px;">
      <el-col :span="5"><el-checkbox v-model="checkAuto">自动巡检</el-checkbox></el-col>
      <el-col :span="19">
        <el-time-picker v-if="checkAuto" v-model="autoTime" format="HH:mm" placeholder="设置巡检时间" />
      </el-col>
    </el-row>
    <div style="max-height:500px; overflow-y:auto;background-color: #070d3c">

      <!-- <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
      <el-tree ref="treeRef" :data="dataOfGroups" show-checkbox node-key="id" :props="defaultProps" />

    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 管理员编辑组件
 */
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { getNewObj } from '@/utils/EsCommon';
import { ElLoading } from 'element-plus'

// ======================================================
//                      变量声明
// ======================================================
const checkAll = ref(false)
const checkAuto = ref(false)
const autoTime = ref(null)
// emit
const emit = defineEmits(['success']);
// 表单数据
const treeRef = ref(null);

// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '600px',
})
// 表单组件的引用实例
const formRef = ref(null);
// 教室分组数据
const dataOfGroups = ref([]);
const defaultProps = {
  children: 'list',
  label: 'name',
}

const apiType = ref('');
// ======================================================
//                      点击操作
// ======================================================

// 点击提交按钮
const onSubmit = () => {
  let Ids = getCheckedKeys() || [];
  if (Ids.length === 0) {
    ElMessage.info('请选择教室');
    return
  }

  //  //自动巡检
  //   aiCheck: "/ai/check",
  //   //上课下课
  //   remoteControls: "/remote/controls",
  let params = {}
  let _api = ''
  if (apiType.value == '0') {
    _api = ApiUrls.aiCheck
    params = {
      room_ids: Ids
    }
  } else if (apiType.value == '1') {
    _api = ApiUrls.remoteControls
    params = {
      roomIds: Ids,
      value: 1
    }
  } else if (apiType.value == '2') {
    _api = ApiUrls.remoteControls
    params = {
      roomIds: Ids,
      value: 2
    }
  }
  const loadingInstance = ElLoading.service({ text: dialogInfo.value.title + '中...' })
  EsAjax.post(_api, params).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.message);
      return;
    }
    dialogInfo.value.visible = false;
    ElMessage.success('操作成功');
    emit('success');
  }).catch(err => {
    ElMessage.error('网络错误：' + err.message);
  }).finally(() => {
    loadingInstance.close()
  })
  // })
}

// 点击取消按钮
const onCancel = () => {
  dataOfGroups.value = []
  dialogInfo.value.visible = false;
}
// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const show = async (type, title, item = null, width = '600px') => {
  apiType.value = type;
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;
  EsAjax.post(ApiUrls.buildingTree, {}).then(res => {
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    dataOfGroups.value = res.data.data || []
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

defineExpose({
  show
})
</script>

<style scoped></style>
